<template>
  <el-dialog class="dialog_info" :title="title" :visible.sync="dialogVisible" width="50%" @close="$emit('update:visible', false)" destroy-on-close>
    <component :is="type" :formData="formData" :formRules="formRules" :formList="formList"/>
    <slot></slot>
  </el-dialog>
</template>

<script>
import info from './info.vue'
import edit from './edit.vue'

export default {
  components: {
    info,
    edit
  },
  name: 'DialogInfo',
  data() {
    return {
      dialogVisible: false
    }
  },
  props: {
    type: {
      type: String,
      default: () => 'info'
    },
    title: {
      type: String,
      default: () => ''
    },
    visible: {
      type: Boolean,
      default: () => false
    },
    formList: {
      type: Array,
      default: () => []
    },
  },
  created () {
    this.dialogVisible = this.visible
  },
  watch: {
    visible(a, b) {
      this.dialogVisible = a
    }
  },
  computed: {
    formData() {
      let obj = {}
      this.formList.forEach(item => {
        obj[item.key] = item.value
      })
      return obj
    },
    formRules() {
      let obj = {}
      this.formList.forEach(item => {
        if (item.rules) {
          obj[item.key] = item.rules
        }
      })
      return obj
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog_info {
  /deep/ .el-form {
    overflow: hidden;
    .el-form-item {
      width: 50%;
      float: left;
      margin-bottom: 10px;
      &.w100 {
        width: 100%;
      }
      .el-form-item__content {
        display: flex;
      }
      .el-image {
        height: 116px;
        width: 116px;
        .image-slot {
          font-size: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          background: #f5f7fa;
          color: #909399;
        }
      }
    }
  }
}
</style>